<template>
    <slot name="content" :list="sortedArray"></slot>
    <slot name="button" :paginationButtons="paginationButtons" :updateCurrent="updateCurrent" :current="current"></slot>
</template>

<script>
export default {
    props: {
        dataList: {
            type: Array,
            required: true,
            default: () => []
        },
        paginate: {
            type: Number,
            required: true,
            default: 0
        },
    },
    data() {
        return {
            current: 1,
        }
    },

    computed: {
        paginationButtons() {
            return Math.ceil(this.dataList.length / this.paginate);
        },
        sortedArray() {
            const list = this.dataList.filter((item, index) => {
                return this.setPaginate(index) ? item : false
            })
            return list;
        }
    },

    methods: {
        setPaginate: function (i) {
            if (this.current == 1) {
                return i < this.paginate;
            }
            else {
                return (i >= (this.paginate * (this.current - 1)) && i < (this.current * this.paginate));
            }
        },
        setStatus: function (status) {
            this.statusFilter = status;
            this.$nextTick(function () {
                this.updatePaginate();
            });
        },
        updateCurrent: function (i) {
            this.current = i;
        },
        updatePaginate: function () {
            this.current = 1;
            this.paginationButtons = Math.ceil(this.dataList.length / this.paginate);
        }
    }
}
</script>

<style lang="scss" scoped>
table {
    thead {
        font-weight: bold;
        font-size: 20px;
    }
}
</style>